<template>
  <div class="dayBettingRecordCell">
    <!-- 列表 -->
    <div
      class="item"
      v-for="(item, index) in list"
      :key="`${item.sid}${item.id}`"
      :style="{
        'border-bottom':
          index != list.length - 1
            ? '0.7px solid rgba(115, 119, 128, 0.15)'
            : 'none',
      }"
    >
      <!-- top 信息 -->
      <div class="item-top items-center">
        <!-- 头像 + 昵称 -->
        <div class="item-top-left items-center">
          <ImgNuxt
            class="item-top-left-img"
            :src="item.avatar || file.avatarDefault"
            :placeholder="file.avatarDefault"
            isHttp
          ></ImgNuxt>
          <div class="item-top-left-name">
            {{ userNameToFormat(item.nickname || item.sid) }}
          </div>
        </div>
        <!-- 美元 + BDC -->
        <div class="item-top-right items-center">
          <div class="item-top-right-money">
            {{
              useDateFormat(Number(item.drawTime), "YYYY-MM-DD HH:mm:ss").value
            }}
          </div>
        </div>
      </div>
      <!-- 下注号码,中奖号码 -->
      <div class="item-bottom items-center">
        <div class="item-bottom-item items-center">
          <div class="item-bottom-title">
            {{ $t("lotteryMoney.xzType") }}
          </div>
          <div v-if="item.drawNo" class="item-bottom-nums items-center">
            <div
              class="item-bottom-nums-item"
              v-for="(num, index) in includesNumToArr(
                item.hashScore || '*****',
                item.drawNo
              )"
              :key="index"
            >
              <img
                v-if="num.include"
                class="item-bottom-nums-item-bg"
                src="/image/lottery-v3/num-zj-bg1.svg"
              />
              <img
                v-else
                class="item-bottom-nums-item-bg"
                src="/image/lottery-v3/num-xz-bg1.svg"
              />

              <div
                class="item-bottom-nums-item-text"
                :style="{ color: num.include ? '#fff' : '#8e96a4' }"
              >
                {{ num.str }}
              </div>
            </div>
          </div>
          <div class="item-bottom-bet">*{{ item.drawCount }}</div>
        </div>
        <div class="item-bottom-item items-center">
          <div class="item-bottom-title" style="text-align: right">
            {{ $t("lotteryMoney.zjType") }}
          </div>
          <div v-if="item.hashScore" class="item-bottom-nums items-center">
            <div
              class="item-bottom-nums-item"
              v-for="(num, index) in item.hashScore.split('')"
              :key="index"
            >
              <img
                class="item-bottom-nums-item-bg"
                src="/image/lottery-v3/num-zj-bg1.svg"
              />
              <div class="item-bottom-nums-item-text">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="dayBettingRecordCell">
import { useDateFormat } from "@vueuse/core";
import { BdcBlockchainHost } from "@/config";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [],
  }
);

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

/**
 * @description: 匹配中奖号码
 * 1. 重复出现的数字,要根据数量显示
 * @param {*} a 中奖号码
 * @param {*} b 下注号码
 * @return {*} c 下注号码,与中奖号码匹配的结果
 * @author: zhj1214
 */
const includesNumToArr = (a: string, b: string) => {
  const charMapA = new Map();

  // 构建字符映射表，记录字符在 a 中的数量
  for (let char of a) {
    charMapA.set(char, (charMapA.get(char) || 0) + 1);
  }

  let c = [];
  for (let char of b) {
    const countInA = charMapA.get(char);
    if (countInA && countInA > 0) {
      c.push({ str: char, include: true });
      charMapA.set(char, countInA - 1);
    } else {
      c.push({ str: char, include: false });
    }
  }
  return c;
};
</script>
<style scoped lang="scss">
.dayBettingRecordCell {
  position: relative;
  background-color: #fff;
  border-top-left-radius: 12 * 2px;
  border-top-right-radius: 12 * 2px;
  padding-top: 20 * 2px;
}

.item {
  position: relative;
  background-color: #fff;
  margin: 0 * 2px 15 * 2px;
  padding: 10 * 2px 0 * 2px;

  &-top {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 8 * 2px;

    &-left {
      &-img {
        width: 36 * 2px;
        height: 36 * 2px;
        border-radius: 100px;
        margin-right: 8 * 2px;
        overflow: hidden;
      }
      &-name {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
      }
    }
    &-right {
      flex-direction: column;
      justify-content: center;
      align-items: end;

      &-money {
        font-size: 13 * 2px;
        color: #999da7;
        font-weight: 400;
      }
      &-bdc {
        font-size: 13 * 2px;
        color: #999da7;
        font-weight: 400;
      }
    }
  }

  &-bottom {
    border-radius: 100px;
    background-color: #f0f3fa;
    padding: 4 * 2px 8 * 2px;
    justify-content: space-between;

    &-item {
      justify-content: center;
    }
    &-title {
      font-size: 11 * 2px;
      color: #003873;
      margin-right: 4 * 2px;
    }
    &-nums {
      justify-content: center;
      &-item {
        position: relative;
        width: 18 * 2px;
        height: 18 * 2px;
        margin-right: 2 * 2px;
        &-bg {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          object-fit: cover;
        }

        &-text {
          position: relative;
          z-index: 9;
          line-height: 18 * 2px;
          text-align: center;
          color: #fff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }
    }

    &-bet {
      font-size: 13 * 2px;
      color: #141924;
      margin-left: 4 * 2px;
    }

    &-jt {
      width: 11 * 2px;
      height: 11 * 2px;
      margin-left: 4 * 2px;
    }
  }
}
</style>
